<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Aaron Ganschow" />
	<meta name="description" content="A simple blog interface for not so simple blogs." />
    <title>
      Tidy Blog
    </title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" /></head>
  <body>
    <div class="wrapper">
      <div class="container">
        <div id="searchBar">
          <div class="head"> &nbsp;search</div>
          <div class="content"><form action="#" method="post"><input name="search_button" type="image" class="button" src="images/search.gif" /><input type="text" name="search" class="search" /></form></div></div>
        <div class="icon">
          <img src="images/hand_logo.gif" width="140" height="98"
          alt="My fantastic Webdings Logo" />
        </div>
        <div id="title">
          <h1>
            Tidy Blog
          </h1>
          <h2>
            it's easier than you think
          </h2>
        </div>
        <div id="navigation">
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li> 	  
            <li>
              <a href="archives.html">Archives</a>
            </li>
            <li>
              <a href="example.html">Example</a>
            </li>
		    <li>
              <a href="gallery.html">Gallery</a>            
			</li>
            <li>
              <a href="design.html" class="selected">Design</a>
            </li>
          </ul>
        </div>
        <br class="clear" />
        <div id="body">
          <div class="sidebar">
            <h3>Categories</h3>
			<div class="content">
				<ul class="links">
				  <li><a href="#">Pop Culture</a></li>
				  <li><a href="#">Rants &amp; Raves</a></li>
				  <li><a href="#">Musings</a></li>
				  <li><a href="#">Coding</a></li>
				  <li><a href="#">Fiction</a></li>
				  <li><a href="#">Christianity</a></li>
				</ul>
			</div>
			<br />
		    <h3>Sceptre of Chaos</h3>
			<div class="content">After all these years, no one could have guessed that it would be in mouth of a whale.			</div>
			<br />
			<h3>Contact</h3>
			<div class="content">
			<form action="#" method="post">
			  <label for="email">e-mail</label><br />
			  <input type="text" name="email" id="email" size="22" tabindex="81" /><br />
			  <label for="message">message</label><br />
			  <textarea cols="18" rows="5" id="message" name="message" tabindex="82"></textarea><br /><br />
			  <input type="submit" name="submit" value="Send" class="submit" tabindex="83" />
			</form>
			</div>
			<br class="clear" />
          </div>
          <div class="content">
            <h3><a href="#">Notes About The Design  </a></h3>
            <div class="byline">By Aaron Ganschow, December 28, 2006 </div>
            <p>Well, here it is! After months of haitus from submitting desings, I am releasing Tidy Blog. It was built on the concept that I would like to have section titles for the footer to be connected to a color. A way of overlapping the sections of the design. It wasn't easy to begin with, but once the design was all out in my head, it became apparent that all I had to do was play with background images and line heights. </p>
            <p>I wanted this to be as comprehensive as possible, which is why I have multiple pages to display how the design should work. I have included ideas for a <a href="archive.html">post archive</a>, <a href="example.html#comment">comments</a> and even a <a href="gallery.html">gallery</a> (with the idea taken from <a href="http://www.cssplay.co.uk/menu/gallery3l.html">Stu Nicholls</a>). You can see all of the tags I have styled below. There aren't many, but it is as much as I deem necessary for a blog design. Feel free to use and extend it as you see necessary. </p>
            <p>I have tested it in as many browsers as I have access to. So, IE 5.01+, Mozilla Firefox 1+, Opera and Safari. It displays nearly identical in all the browsers. If you have any suggestions to make it work even better then let me know. If you would like to notify me that you are using my design, feel free to <a href="mailto:aaron@ganschow.us">e-mail me</a> and let me know. I would appreciate that you retain some link to either <a href="http://www.wildleaf.net/">wildleaf.net</a> or <a href="http://aaron.ganschow.us/">aaron.ganschow.us</a> on any site that uses this design. It is not necessary, just nice. My main goal is for people to learn from the design. </p>
            <p>All of the icons on the archives page are from <a href="http://www.famfamfam.com/">famfamfam.com</a> converted into gif, all of the photographs from this site can be found on <a href="http://www.sxc.hu/">sxc.hu </a>, and special thanks to all of the other open source web developers who have helped me grow in my XHTML and CSS knowledge. <br />
<br />
*music playing*<br />
<br />
And I thank Mom, and Dad and wife.  Without you guys I wouldnt still be alive.  Can you turn that music off?  C'mon, I'm not done ye...</p>
            <div class="nodeFoot"><a href="#">read more</a> &nbsp;&bull;&nbsp; <a href="#">view pdf</a> &nbsp;&bull;&nbsp; <a href="#">email to friend</a> &nbsp;&bull;&nbsp; <a href="#comment">comments</a></div><br />
            <h3><a href="#">Styled Tags</a></h3>
            <div class="byline">By Aaron Ganschow, December 29, 2006 </div>
            <h4>Headers</h4>
            <h3>Header 3 </h3>
            <h4>Header 4</h4>
            <h5>Header 5 </h5>
            <h6>Header 6 </h6>
            <p>A note on headings: I don't see any reason why you should get down to heading 6, but it is generally unstyled. I also suggest a change in the trend of using h1's for everything. It isn't right! H1 is your top level heading which, to me, means your title, and h2 is your subtitle. At least, that's the idea I took with this design.</p>
            <h4>Pre tag </h4>
            <pre>This is the coolest pre tag in the world.  If you could go back in time and make all 
your pre tags like this, you would.  I know it. Okay, so probably not, but what are you<br />gonna do about it?</pre>
            <h4>Code Tag </h4>
			  <code>&lt;?php<br />
		      <br />
&nbsp; &nbsp;// Can you spot the error in this &lt;code&gt;? (it's a logical error) <br />
&nbsp; &nbsp;$myFancyArray = array(&quot;.&quot;, &quot;socks&quot;, &quot;my&quot;, &quot;rocks&quot;, &quot;This&quot;);<br />
&nbsp; &nbsp;print(implode(&quot; &quot;, array_reverse($myFancyArray)));<br />
			<br />
			/* Okay, if you don't get it, I'll give you another hint. It is likely less of a logical and more of a gramatical error. But the logical error caused it. */ <br />
			<br />
			?&gt;<br />
              </code>
<br />
<h4>Blockquote</h4>
            <blockquote>
              <p>This is a blockquote like any other blockquote that you have seen in your life. There isnt anything fancy about it, it just looks like a blockquote should look in this design. </p>
              <blockquote>
                <p>This is a blockquote inside the other blockquote. Mmmmm. Nested blockquotes make the internets happy. </p>
              </blockquote>
            </blockquote>

<h4>Lists</h4>
<h5>Ordered</h5>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ol>
	  <li>Subitem 1</li>
	  <li>Subitem 2
	    <ol>
		  <li>Layer 3 Item 1</li>
		  <li>Layer 3 Item 2</li>
		</ol>
	  </li>
	  <li>Subitem 3</li>
	  <li>Subitem 4</li>
	</ol>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

<h5>Unordered</h5>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
	  <li>Subitem 1</li>
	  <li>Subitem 2
	    <ul>
		  <li>Layer 3 Item 1</li>
		  <li>Layer 3 Item 2</li>
		</ul>
	  </li>
	  <li>Subitem 3</li>
	  <li>Subitem 4</li>
	</ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
            <div class="nodeFoot"><a href="#">read more</a> &nbsp;&bull;&nbsp; <a href="#">view pdf</a> &nbsp;&bull;&nbsp; <a href="#">email to friend</a> &nbsp;&bull;&nbsp; <a href="#comment">comments</a></div><br />

<br />
			
			<a name="comment"></a>
			<h3>Submit Comment</h3>
			<form action="#" method="post">
			  <div class="area100"><label for="name">Name</label><br /><input type="text" name="name" id="name" value="Anonymous Coward" tabindex="31" /></div>
			  <div class="area100"><label for="email2">Email</label><br /><input type="text" name="email2" id="email2" value="anonymous@coward.net" tabindex="32" /></div>
			  <div class="area100"><label for="comment">Comment</label><br /><textarea name="comment" id="comment" rows="10" cols="40" tabindex="33"></textarea></div>
			  <input type="submit" name="submitComment" value="Post Comment" class="submit" />
			</form>
			</div>
          <br class="clear" />
        </div>
        <br class="clear" />
      </div>
      <br class="clear" />
      <div id="footer">
        <div id="footHead">
          <div class="container">
            <div class="head">
              Recent Posts
            </div>
            <div class="head">
              Awesome Links
            </div>
            <div class="head">
              Image Showcase
            </div>
          </div>
		  <div class="clear"></div>
        </div>
        <div id="footBody">
          <div class="container">
            <div class="content">
              <ul>
                <li>
                  <a href="#">My Uber beats your uber</a>
                </li>
                <li>
                  <a href="#">Why drama makes bunnies cry</a>
                </li>
                <li>
                  <a href="#">Buffy the Vampire Slayer vs Pikachu</a>
                </li>
                <li>
                  <a href="#">Myspace themes <strong><em>without</em></strong>
                  glitter</a>
                </li>
                <li>
                  <a href="#">This sundress makes my pig look fat</a>
                </li>
              </ul>
            </div>
            <div class="content">
              <ul>
                <li>
                  <a href="http://www.wildleaf.net/">Wildleaf</a>
                </li>
                <li>
                  <a href="http://aaron.ganschow.us/">Aaron.Ganschow</a>
                </li>
                <li>
                  <a href="http://www.sxc.hu/">Stock.xchng</a>
                </li>
                <li>
                  <a href="http://www.css-galleries.com/">CSS Galleries</a>
                </li>
              </ul>
            </div>
            <div class="content showcase">
              <img src="images/thumbs/1.jpg" width="65" height="65" alt="1" /> <img
              src="images/thumbs/2.jpg" width="65" height="65" alt="2" /> <img
              src="images/thumbs/3.jpg" width="65" height="65" alt="3" /> <img
              src="images/thumbs/4.jpg" width="65" height="65" alt="4" /> <img
              src="images/thumbs/5.jpg" width="65" height="65" alt="5" /> <img
              src="images/thumbs/6.jpg" width="65" height="65" alt="6" /> <img
              src="images/thumbs/7.jpg" width="65" height="65" alt="7" /> <img
              src="images/thumbs/8.jpg" width="65" height="65" alt="8" />
            </div>
          </div>
		  <div class="clear"></div>
          <div id="copyright">
            <div class="container">
              &copy; Copyright 2006 <a href="http://aaron.ganschow.us/">Aaron Ganschow</a>
            </div>
          </div>
        </div>
      </div>
    </div>
	<img src="images/tab_over.gif" style="display: none; visibility:hidden; width:0; height:0; position:absolute; top: -100px; left: -200px;" alt="I am soooo fake pre-loading this image so the navigation doesn't skip while loading the over state.  I know I could use the sliding doors technique to avoid this fate, but I am too lazy." />
  </body>
</html>